<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例生命周期</title>
</head>

<body>
    <h1>实例生命周期</h1>
    <div style="color:gray">
        <p>实例生命周期App和组件的。</p>
    </div>
    <div>
        <a href="/">回目录</a>
    </div>
    <hr>
    <div id="app">
        <my-comp :item="{id: '组件1'}"></my-comp>
        <my-comp :item="{id: '组件2'}" v-if="more"></my-comp>
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component("my-comp", {
            props: ["item"],
            template: "<div>{{item.id}}</div>",
            data: function () {
                return {
                    id: this.item.id
                }
            },
            beforeCreate: function () {
                console.log("beforeCreate : " + this.id);
            },
            created: function () {
                console.log("created : " + this.id);
            },
            beforeMount: function () {
                console.log("beforeMount : " + this.id);
            },
            mounted: function () {
                console.log("mounted : " + this.id);
            },
            beforeUpdate: function () {
                console.log("beforeUpdate : " + this.id);
            },
            updated: function () {
                console.log("updated : " + this.id);
            },
            activated: function () {
                console.log("activated : " + this.id);
            },
            deactivated: function () {
                console.log("deactivated : " + this.id);
            },
            beforeDestroy: function () {
                console.log("beforeDestroy : " + this.id);
            },
            destroyed: function () {
                console.log("destroyed : " + this.id);
            },
            errorCaptured: function () {
                console.log("errorCaptured : " + this.id);
            },
        });

        var app = new Vue({
            el: "#app",
            data: {
                id: 'app',
                more: true
            },
            beforeCreate: function () {
                console.log("app beforeCreate : " + this.id);
            },
            created: function () {
                console.log("app created : " + this.id);
            },
            beforeMount: function () {
                console.log("app beforeMount : " + this.id);
            },
            mounted: function () {
                console.log("app mounted : " + this.id);
            },
            beforeUpdate: function () {
                console.log("app beforeUpdate : " + this.id);
            },
            updated: function () {
                console.log("app updated : " + this.id);
            },
            activated: function () {
                console.log("app activated : " + this.id);
            },
            deactivated: function () {
                console.log("app deactivated : " + this.id);
            },
            beforeDestroy: function () {
                console.log("app beforeDestroy : " + this.id);
            },
            destroyed: function () {
                console.log("app destroyed : " + this.id);
            },
            errorCaptured: function () {
                console.log("app errorCaptured : " + this.id);
            },
        });
    </script>
</body>

</html>